<template>
  <div class="m-header">
    <div class="m-header_box left">
      <div class="menu">
        <i class="iconfont icon-menu icon" title="菜单" @mouseenter="showMenuList"></i>
        <ul class="menu-list" v-show="menuListVisible" @mouseleave="hideMenuList">
          <li class="menu-item" v-for="r in rs" :key="r.key" @click="go2Page(r)">
            {{ r?.meta.title }}
          </li>
        </ul>
      </div>
      <!-- <div class="logo"><img src="@/assets/img/logo.png" alt="" /></div> -->
    </div>
    <div class="m-header_box">
      <!-- <div class="bg">
        <dv-decoration-8 style="width: 300px; height: 50px" />
        <div class="empty-box"></div>
        <dv-decoration-8 :reverse="true" style="width: 300px; height: 50px" />
      </div> -->
      <div class="title" @click="goHome">{{ props.title || '看板' }}</div>
    </div>
    <div class="m-header_box right">
      <div class="time-now">{{ datetime }}</div>

      <div class="full-screen">
        <i
          v-if="!fsStore.isFullScreen"
          class="iconfont icon-fullscreen-expand icon"
          @click="handleFullScreen"
        ></i>
        <svg-icon
          v-else
          class="icon"
          icon="fullscreen-shrink"
          color="red"
          @click="handleExitFullScreen"
        ></svg-icon>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onBeforeMount, onUnmounted, getCurrentInstance } from 'vue'
import moment from 'moment'
import { useFullScreenStore } from '@/stores/fullScreen'
import { useRouter } from 'vue-router'

import { calcRate } from "@/utils/tools"

const { proxy } = getCurrentInstance()
const router = useRouter()
const routes = proxy.$router.options.routes
const rs = ref([])
rs.value = routes.filter((r) => !['/:pathMatch(.*)*', '/'].includes(r.path))

const fsStore = useFullScreenStore()

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})

const menuListVisible = ref(false)
function showMenuList() {
  menuListVisible.value = true
}
function hideMenuList() {
  menuListVisible.value = false
}
function go2Page(route) {
  router.push(route)
}

let timer = ref()
let datetime = ref('')

function setDatetime() {
  const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const weekIndex = moment().format('d')
  const week = weekMap[weekIndex]
  datetime.value = moment().format(`yyyy年MM月DD日 ${week} HH:mm:ss`)
}

function goHome() {
  return
  router.push({ path: '/home' })
}

onBeforeMount(() => {
  setDatetime()
  timer.value = setInterval(setDatetime, 1000)
})
onUnmounted(() => {
  clearInterval(timer.value)
})

function setFullScreen(type) {
  fsStore.setFullScreen(type)
}

function handleFullScreen() {
  setFullScreen(true)
  const doc = document.documentElement
  doc.requestFullScreen && doc.requestFullScreen()
  doc.webkitRequestFullScreen && doc.webkitRequestFullScreen()
  doc.mozRequestFullScreen && doc.mozRequestFullScreen()
  doc.msRequestFullScreen && doc.msRequestFullScreen()
  doc.oRequestFullScreen && doc.oRequestFullScreen()
  calcRate()
  // window.parent.setFullScreen(true)
}
function handleExitFullScreen() {
  setFullScreen(false)
  const doc = window.document
  doc.exitFullscreen && doc.exitFullscreen()
  doc.msExitFullscreen && doc.msExitFullscreen()
  doc.mozCancelFullScreen && doc.mozCancelFullScreen()
  doc.webkitExitFullscreen && doc.webkitExitFullscreen()
  // window.parent.setFullScreen(false)
  calcRate()
}
</script>
<style lang="less" scoped>
// color: aqua;
@themeColor: rgb(36, 36, 163);
@fontColor: rgb(77, 77, 178);
@fontColor: #FFF;
.m-header {
  font-size: 18px;
  // border-bottom: 1px solid #33616d;
  box-shadow: 0px 0 10px 1px #CCD;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .m-header_box {
    flex: 1;
    display: flex;
    position: relative;
    // .bg {
    //   display: flex;
    //   padding: 12px 0 8px 0;
    //   .empty-box {
    //     width: 600px;
    //   }
    // }
    .title {
      width: 600px;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 50px;
      letter-spacing: 0.15em;
      font-weight: 700;
      color: @themeColor;
      // 渐变
      background: -webkit-linear-gradient(#eee, @themeColor);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
      &:hover {
        cursor: pointer;
      }
    }
    &.left {
      // border-top: 2px solid rgb(63, 150, 165);
      border-top-right-radius: 4px;
      height: 50px;
      line-height: 50px;
      // background-image: url(/src/assets/img/logo.png);
      // background-repeat: no-repeat;
      // background-size: contain;
      // vertical-align: middle;
      .logo {
        width: 200px;
        height: 100%;
        margin-left: 4px;
        img {
          height: 100%;
        }
      }
      .menu {
        position: relative;
        display: inline-block;
        font-weight: 700;
        color: @themeColor;
        .icon {
          color: #CCD;
          font-size: 28px;
          // opacity: 0.1;
        }
        .icon:hover {
          cursor: pointer;
          opacity: 0.8;
        }
        .menu-list {
          z-index: 1;
          width: 240px;
          border: 1px solid @fontColor;
          position: absolute;
          top: 60px;
          left: 0;
          background-color: rgb(26, 25, 25);
          padding: 10px 0;
          border-radius: 3px;
          border-color: rgba(135, 181, 189, 0.8);
          .menu-item {
            line-height: 32px;
            font-size: 18px;
            padding: 0 10px;
            color: #FFF;
            &:hover {
              color: @fontColor;
              cursor: pointer;
              background-color: rgba(63, 150, 165, 0.2);
            }
          }
        }
      }
    }
    &.right {
      text-align: right;
      display: block;
      height: 50px;
      line-height: 50px;
      // border-top: 2px solid rgb(63, 150, 165);
      border-top-left-radius: 4px;
      .time-now {
        display: inline-block;
        font-weight: 700;
        color: @fontColor;
        font-size: 24px;
        // min-width: 275px;
      }
      .full-screen {
        display: inline-block;
        margin-left: 5px;
        color: @fontColor;
        .icon {
          font-size: 24px;
        }
        .icon:hover {
          cursor: pointer;
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
